<template>
  <div style="padding:50px;">
    <el-button size="small" @click="changeClick" type="primary">切换登录方式</el-button>
      <br><br>
      <template v-if="loginType === 'username'">
        <label>Username</label>
        <el-input placeholder="Enter your username" key="username-input"></el-input>
      </template>
      <template v-else>
        <label>Email</label>
        <el-input placeholder="Enter your email address" key="email-input"></el-input>
      </template>
      <hr>
      <h4>v-for列表</h4>
       <ul class="demo">
        <li v-for="value in object" :key="value.id">
          {{ value }}
        </li>
      </ul>
      <br><br>
      <ul >
        <li v-for="(item,index) in items " :key="item.id" >
          {{ index }}-{{item.message}}
          {{objectMessage}}    
        </li>
        
         <hr>
        <div v-for="n in even(numbers)" :key="n.id">{{ n }}</div>
      </ul>
      <hr>
       <h3>{{date|formatDate}}</h3>
  </div>
</template>

<script>

export default {
  name:'conditional',
  padDate (value){
      return value<10?'0'+value:value
    },
  data(){
    return{
      loginType:'username',
      object:{
        firstName: 'John',
        lastName: 'Doe',
        age: 30,
      },
      items:[     
          { message: 'Foo' },
          { message: 'Bar' }  
      ],
      numbers:[1, 2, 3, 4, 5 ],
      date:new Date(),
    }
  },

  filters:{
   /* 时间过滤器 */
      formatDate(value){     
        // console.log(value)
          var date=new Date(value)
          var year=date.getFullYear()
          var month=date.getMonth()+1
          var day=date.getDate()
          var hours=date.getHours()
          var minutes=date.getMinutes()
          var seconds=date.getSeconds()
          /* 将整理好的数据返回回去 */
          return year+'-'+month+'-'+day+'-'+hours+':'+minutes+':'+seconds
      }
  },
   computed: {
     objectMessage:function () {
       return this.items.push({
         message:'男'
       })
     }
   },
   mounted(){
    this.timer=setInterval(function () {
      this.date=new Date()
    },1000)
   },
   beforeDestroy(){
     if (this.timer) {
       clearInterval(this.timer)
     }
   },
  methods:{
    changeClick(){
    /* 如果this.loginType等于username了使用邮箱方式登录，否则使用姓名方式 */
    if (this.loginType==='username') {
      this.loginType='Emwwwail'
    }else{
      this.loginType='username'
     }
    },
     even(numbers){
       return numbers.filter(function (number) {
         return number%2===0
       })
     }
  }
}
</script>
